<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div class="logo-container">
          <el-icon class="logo-icon"><DataLine /></el-icon>
          <h1>AnySDK Redis 管理平台</h1>
        </div>
        <div class="header-actions">
          <el-button
            type="primary"
            :icon="Setting"
            @click="showConfigDialog = true"
            size="default"
          >
            设置
          </el-button>
          <el-select v-model="environment" @change="handleEnvironmentChange" class="env-select">
            <el-option label="本地 Redis" value="local" />
            <el-option label="阿里云 Redis" value="aliyun" />
          </el-select>
        </div>
      </el-header>

      <el-main>
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="字符串" name="string">
            <string-operations />
          </el-tab-pane>
          <el-tab-pane label="哈希表" name="hash">
            <hash-operations />
          </el-tab-pane>
          <el-tab-pane label="列表" name="list">
            <list-operations />
          </el-tab-pane>
          <el-tab-pane label="集合" name="set">
            <set-operations />
          </el-tab-pane>
          <el-tab-pane label="有序集合" name="zset">
            <z-set-operations />
          </el-tab-pane>
          <el-tab-pane label="高级功能" name="advanced">
            <advanced-operations />
          </el-tab-pane>
        </el-tabs>

        <!-- Redis 数据概览表格 -->
        <data-table />
      </el-main>

      <el-footer>
        <p>© 2025 AnySDK Redis 管理平台 | 版本 1.0.0</p>
      </el-footer>
    </el-container>

    <!-- 配置设置对话框 -->
    <el-dialog
      v-model="showConfigDialog"
      title="Redis 配置设置"
      width="80%"
      :before-close="handleConfigDialogClose"
    >
      <ConfigPanel />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, DataLine } from '@element-plus/icons-vue'
import StringOperations from './components/StringOperations.vue'
import HashOperations from './components/HashOperations.vue'
import ListOperations from './components/ListOperations.vue'
import SetOperations from './components/SetOperations.vue'
import ZSetOperations from './components/ZSetOperations.vue'
import AdvancedOperations from './components/AdvancedOperations.vue'
import DataTable from './components/DataTable.vue'
import ConfigPanel from './components/ConfigPanel.vue'
import { switchEnvironment } from './api/redis'

defineOptions({
  components: {
    StringOperations,
    HashOperations,
    ListOperations,
    SetOperations,
    ZSetOperations,
    AdvancedOperations,
    DataTable,
    ConfigPanel
  }
})

const environment = ref('local')
const activeTab = ref('string')
const showConfigDialog = ref(false)

const handleEnvironmentChange = async (value: string) => {
  try {
    await switchEnvironment(value)
    ElMessage.success(`已切换到${value === 'local' ? '本地' : '阿里云'} Redis 环境`)
  } catch (error) {
    ElMessage.error('环境切换失败')
  }
}

const handleConfigDialogClose = (done: () => void) => {
  done()
}
</script>

<style scoped>
.app-container {
  height: 100vh;
  background-color: #f5f7fa;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #409EFF 0%, #1E88E5 100%);
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  margin-right: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.env-select {
  width: 150px;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}

.el-footer {
  text-align: center;
  color: #909399;
  font-size: 12px;
  padding: 15px 0;
  border-top: 1px solid #e4e7ed;
  background-color: #fff;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-header {
    flex-direction: column;
    height: auto !important;
    padding: 10px;
  }

  .logo-container {
    margin-bottom: 10px;
  }

  .header-actions {
    flex-direction: column;
    gap: 10px;
  }

  h1 {
    font-size: 1.5em;
  }
}
</style>